<template>
	<div class="login">
		<div class="login-container">
			<div class="login-title__pic">{{title.registerTitle}}</div>
			<div class="login-content">
				<div class="login-content__right">

					<el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form">
						<div class="welcome-text">护士帐号注册</div>
						<el-row :gutter="20">
							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="regionName">
									<div class="login-account1">
										<el-input class="login-account" :disabled="true"
											v-model="this.loginForm.regionName" :placeholder="this.loginForm.regionName"
											clearable size="small" style="margin-bottom: 20px" placeholder="请选择机构所在的辖区">
											<template #prefix>
												<img src="@/assets/fronts/addr.png" class="login-account__icon1" />
											</template>
										</el-input>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="">
									<div class="tree-container">
										<el-tree class="scrollable-tree" :props="props" :load="loadNode" lazy
											node-key="code" @node-click="handleNodeClick">
										</el-tree>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="">
									<el-input :disabled="true" class="login-account" type="text"
										v-model="loginForm.institutionName" autocomplete="off"
										placeholder="请选择右边护士所在主职业机构">
										<template #prefix>
											<img src="@/assets/fronts/hos.png" class="login-account__icon1" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="">
									<el-select @change="handleHos(selectData.id)" class="login-account"
										v-model="selectData.id" placeholder="请选择机构">
										<template slot="prefix">
											<span
												style="padding: 5px; line-height: 33px; font-size: 18px; color: #409eff;">
												<i class="el-icon-search"></i>
											</span>
										</template>
										<el-option v-for="hospital in hosList" :key="hospital.uniqueCode"
											:label="hospital.institutionName" :value="hospital.hospitalId">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12" :xs="24">
							  <el-input v-if="this.loginForm.reCount==0" class="login-account" type="text" v-model="loginForm.name" autocomplete="off"
							            placeholder="请先查并在右侧选择要注册的护士,如未找到请在下方姓名栏填写">
							    <template #prefix>
							      <img src="@/assets/fronts/dname.png" class="login-account__icon2"/>
							    </template>
							  </el-input>
							 </el-col>
							 <el-col  v-if="this.loginForm.reCount==0" :span="6" :xs="24">
							    <el-select @change="handleNurseOptionClick(selectNurseData.id)" class="login-account" v-model="selectNurseData.id" placeholder="请选择护士">
							      <template slot="prefix">
							        <span style="padding: 5px; line-height: 33px; font-size: 18px; color: #409eff;">
							          <i class="el-icon-search"></i>
							        </span>
							      </template>
							      <el-option v-for="nurse in nurseList" :key="nurse.nurseId" :label="nurse.name" :value="nurse.nurseId">
							      </el-option>
							    </el-select>
							 </el-col>
							 <el-col :span="6" :xs="24">
							 	<el-form-item label="" prop="idCard">
							 		<el-input class="login-account" type="text" v-model="loginForm.idCard"
							 			autocomplete="off" placeholder="请输入护士身份证号">
							 			<template #prefix>
							 				<img src="@/assets/fronts/idcard.png" class="login-account__icon2" />
							 			</template>
							 		</el-input>
							 	</el-form-item>
							 </el-col>
							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="shorName">
									<el-input class="login-account" type="text" v-model="shotName"
										autocomplete="off" placeholder="姓名栏,请在这里输入护士姓名">
										<template #prefix>
											<img src="@/assets/fronts/dname.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" :xs="24">
								<el-form-item class="login-account" label="" prop="sex">
									<el-select v-model="loginForm.sex" placeholder="请选择护士性别" :style="{width: '100%'}">
										<el-option-group>
											<el-option label="男" value="1" />
											<el-option label="女" value="2" />
										</el-option-group>
										<template #prefix>
											<img src="@/assets/fronts/gender.png" class="login-account__icon2" />
										</template>
									</el-select>
								</el-form-item>
							</el-col>


							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="birthday">
									<el-date-picker class="login-account" v-model="loginForm.birthday" type="date"
										placeholder="请选择出生日期" format="yyyy-MM-dd"   :picker-options="pickerOptions">
										<template #prefix>
											<img src="@/assets/fronts/time.png" class="login-account__icon2" />
										</template>
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="phone">
									<el-input class="login-account" type="text" v-model="loginForm.phone"
										autocomplete="off" placeholder="请输入手机号">
										<template #prefix>
											<img src="@/assets/fronts/phone.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>

							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="nurseSeniority">
									<el-input class="login-account" type="text" v-model="loginForm.nurseSeniority"
										autocomplete="off" placeholder="请输入护士执业证书编号">
										<template #prefix>
											<img src="@/assets/fronts/licence.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="nurselicence">
									<el-input class="login-account" type="text" v-model="loginForm.nurselicence"
										autocomplete="off" placeholder="请输入护士资格证书编号">
										<template #prefix>
											<img src="@/assets/fronts/qualification.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>

							<el-col :span="6" :xs="24">
								<el-form-item class="login-account" label="" prop="technicalTitle">
									<el-select v-model="loginForm.technicalTitle" placeholder="请选择护士职称"
										:style="{width: '100%'}">
										<el-option-group>
											<el-option label="无职称" value="0" />
											<el-option label="主任护士" value="1" />
											<el-option label="副主任护士" value="2" />
											<el-option label="主治护士" value="3" />
											<el-option label="护士" value="4" />
											<el-option label="助理护士" value="5" />
											<el-option label="理疗师" value="6" />
										</el-option-group>
										<template #prefix>
											<img src="@/assets/fronts/technicalTitle.png"
												class="login-account__icon2" />
										</template>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="specialty">
									<el-input class="login-account" type="text" v-model="loginForm.specialty"
										autocomplete="off" placeholder="请输入院校及专业">
										<template #prefix>
											<img src="@/assets/fronts/school.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>

							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="antecedent">
									<el-input class="login-account" type="text" v-model="loginForm.antecedent"
										autocomplete="off" placeholder="护士学历">
										<template #prefix>
											<img src="@/assets/fronts/specialty.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>

							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="username">
									<el-input class="login-account" type="text" v-model="loginForm.username"
										autocomplete="off" placeholder="注册的用户名">
										<template #prefix>
											<img src="@/assets/fronts/user.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6" :xs="24">
								<el-form-item label="" prop="password">
									<el-input class="login-account" type="text" v-model="loginForm.password"
										autocomplete="off" placeholder="注册的密码">
										<template #prefix>
											<img src="@/assets/fronts/pwd.png" class="login-account__icon2" />
										</template>
									</el-input>
								</el-form-item>
							</el-col>

							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="">
									<div>
										&nbsp;
									</div>
								</el-form-item>
							</el-col>

							<el-col :span="12" :xs="24">
								<el-form-item label="" prop="">
									<div class="login-submit" @click="handleLogin">
										<span v-if="!loading">点击注册护士</span>
										<span v-else>注 册 中...</span>
										<i class="el-icon-right"></i>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<!-- <div class="flex-1"></div> -->

					</el-form>
				</div>
			</div>
			<!--      <p class="archival-information">沪ICP备15050430号-1ICP 证沪B2-20180118 沪公网安备 31011502008153号</p>-->
		</div>
	</div>
</template>

<script>
	import {
		getCodeImg,
		registerHos,
		getRegionList,
		registerDoctor,
		registerNurse,
		getNurListBySig,
		getHosListBySig,
		checkHosSameName,
		checkDocSameName,
    registerTitle,
		checkNurSameName
	} from "@/api/login";
	import Cookies from "js-cookie";
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt'
	import {
		listProvince1,
		listCity1,
		listArea1,
		listStreet1,
		listVillage1
	} from "@/api/his/province";
	import {
		treeselect
	} from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	export default {
		name: "Login",
		data() {
			return {
				shotName:null,
        title: {
          registerTitle: '',
        },
				nurseList: [], //存储护士
				selectNurseData: {
					id: ''
				},
				selectData: {
					id: ''
				},
				shotName: '',
				loading: false,
				hosList: [], //存储医院
				props: {
					label: 'name',
					children: 'zones',
					isLeaf: 'leaf'
				},
         pickerOptions: {
                disabledDate(time) {
                  // 获取当前日期的时间戳
                  const now = Date.now();
                  // 将选择的日期转换为时间戳
                  const selectedTime = new Date(time).getTime();
                  // 如果选择的日期大于当前日期，则禁用
                  return selectedTime > now;
                }
              },
				loginForm: {
					reCount:null,//>0表示名称无重复选项
					provinceCode: '', //省
					cityCode: '', //市
					areaCode: '', //区
					streetCode: '', //镇
					regionCode: '', //选中的区域码
					regionName: '', //选中的区域名称
					username: '', //用户名
					password: '', //密码
					institutionName: '', //医院名称
					name: '', //医生姓名
					sex: '', //医生性别
					birthday: '', //生日
					idCard: '', //身份证号
					phone: '', //手机号
					antecedent: '', //学历
					specialty: '', //所学专业
					nurseSeniority: '', //执业证书编码
					nurselicence: '', //资格证编号
					hospitalId: '', //医院ID
					signature: '' //签名

				},
				//-------------------
				// 表单校验
				// 表单校验
				rules: {
					regionCode: [{
						required: true,
						message: "请选择辖区",
						trigger: "blur"
					}],
					institutionName: [{
						required: true,
						message: "机构名称不能为空",
						trigger: "blur"
					}],
					name: [{
						required: true,
						message: "护士姓名不能为空",
						trigger: "blur"
					}],
					phone: [{
							required: true,
							message: "手机号码不能为空",
							trigger: "blur"
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					],
					idCard: [{
							required: true,
							message: "护士身份证号不能为空",
							trigger: "blur"
						},
						{
							pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
							message: "请输入正确的身份证号码",
							trigger: "blur"
						}
					],
					sex: [{
						required: true,
						message: "请选择护士性别",
						trigger: "blur"
					}],
					birthday: [{
						required: true,
						message: "请选择出生日期",
						trigger: "blur"
					}],
					antecedent: [{
						required: true,
						message: "护士学历不能为空",
						trigger: "blur"
					}],
					specialty: [{
						required: true,
						message: "护士院校和专业不能为空",
						trigger: "blur"
					}],
					nurseSeniority: [{
						required: true,
						message: "护士执业证书不能为空",
						trigger: "blur"
					}],
					nurselicence: [{
						required: true,
						message: "护士资格证书不能为空",
						trigger: "blur"
					}],
					username: [{
						required: true,
						message: "用户昵称不能为空",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "用户密码不能为空",
						trigger: "blur"
					}]
				}
				//-------------------
			}

		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			},

			'loginForm.institutionName': {
				handler(newValue) {
					this.searchHandler(newValue);
				},
				immediate: true
			}
		},

		created() {
			this.loginForm.signature = this.$route.query.signature
			this.checkNurSameName()
			this.getHosList();
			this.getProvince();
			this.getNurseList();
      this.getTitle();
		},
		methods: {
      getTitle() {
        registerTitle({
          signature: this.loginForm.signature
        }).then(res => {
          this.title.registerTitle = res.data.registerTitle;
        }).catch(error => {
          // 处理获取标题信息时的错误
          console.error('获取标题信息失败:', error);
        }).finally(() => {
          // 无论请求是否成功都执行的代码块
          if (this.title.registerTitle === undefined || this.title.registerTitle === '') {
            this.title.registerTitle = '遵义市汇川区信息化卫生监督体系平台';
          }
        });
      },
			//查看有无重复姓名的护士
			checkNurSameName() {
				checkNurSameName({
					signature: this.loginForm.signature
				}).then(response => {
					// alert(JSON.stringify(response) )
					this.loginForm.reCount = response
					// console.log("===========================" + this.loginForm.reCount);
					// console.log("///////////////////////"+this.hosList);
					// console.log("///////////////////////"+ response);
				}).catch(error => {
					console.error('获取信息出错:', error);
				});
			},
			// 节点单击事件
			handleNodeClick(node) {
				if (node.code.length == 2) {
					this.loginForm.provinceCode = node.code
				} else if (node.code.length == 4) {
					this.loginForm.cityCode = node.code
				} else if (node.code.length == 6) {
					this.loginForm.areaCode = node.code
				}
				if (node.code.length == 9) {
					this.loginForm.streetCode = node.code
				}
				this.loginForm.regionCode = node.code
				this.loginForm.regionName = node.name
			},
			handleHos(hospitalId) {
				for (let hos of this.hosList) {
					if (hospitalId === hos.hospitalId) {
						this.loginForm.institutionName = hos.institutionName
						this.loginForm.hospitalId = hos.hospitalId
						break; // 找到匹配项后跳出循环
					}
				}
				this.loginForm.hospitalId = hospitalId;
			},
			searchHandler(newValue) {
				// 触发搜索操作
				const keyword = newValue.toLowerCase();
				for (let hos of this.hosList) {
					if (hos.institutionName.toLowerCase().includes(keyword)) {
						this.selectData.id = hos.institutionName;

						break; // 找到匹配项后跳出循环
					}
				}
			},
			//根据signature！=null 去获取医院
			getHosList() {
				getHosListBySig({
					signature: this.loginForm.signature
				}).then(response => {
					this.hosList = response;
				}).catch(error => {
					console.error('获取医院列表出错:', error);
				});
			},
			//医生
			getNurseList() {
				getNurListBySig({
					signature: this.loginForm.signature
				}).then(response => {
					this.nurseList = response;
				}).catch(error => {
					console.error('获取护士列表出错:', error);
				});
			},
			handleNurseOptionClick(nurseId) {
				for (let nurse of this.nurseList) {
					if (nurseId === nurse.nurseId) {
						// 可以在这里进行其他操作，例如将匹配的医院赋值给 selectedHospital
						this.loginForm.name = nurse.name;
						break; // 找到匹配项后跳出循环
					}
				}
				this.loginForm.nurseId = nurseId;
			},
			loadNode(node, resolve) {
				// 根据节点的层级来判断加载数据
				if (node.level === 0) {
					// 当节点层级为 0 时，即根节点，返回第一级的数据（省份数据）
					this.getProvince().then(response => {
						// 将获取到的省份数据转换成级联选择器的节点数据格式
						const data = response.map(province => {
							return {
								name: province.name,
								code: province.code,
								parentName: province.name,
								isLeaf: false // 省份节点设置为非叶子节点
							};
						});
						resolve(data);
					}).catch(error => {
						console.error('Failed to load province data:', error);
						resolve([]); // 加载失败时返回空数组
					});
				} else if (node.level === 1) {
					// 当节点层级为 1 时，即省份节点，根据省份 code 获取对应的市数据
					const provinceCode = node.data.code;
					this.getCity(provinceCode).then(response => {
						// 将获取到的市数据转换成级联选择器的节点数据格式
						const data = response.map(city => {
							return {
								name: city.name,
								code: city.code,
								parentName: node.data.parentName + "/" + city.name,
								isLeaf: false // 市节点设置为非叶子节点
							};
						});
						resolve(data);
					}).catch(error => {
						console.error('Failed to load city data:', error);
						resolve([]); // 加载失败时返回空数组
					});
				} else if (node.level === 2) {
					// 当节点层级为 2 时，即市级节点，根据市 code 获取对应的县/区数据
					const cityCode = node.data.code;
					this.getArea(cityCode).then(response => {
						// 将获取到的县/区数据转换成级联选择器的节点数据格式
						const data = response.map(district => {
							return {
								name: district.name,
								code: district.code,
								parentName: node.data.parentName + "/" + district.name,
								isLeaf: false // 县/区节点设置为非叶子节点
							};
						});
						resolve(data);
					}).catch(error => {
						console.error('Failed to load district data:', error);
						resolve([]); // 加载失败时返回空数组
					});
				} else if (node.level === 3) {
					// 当节点层级为 3 时，即县/区节点，根据县/区 code 获取对应的镇/街道数据
					const areaCode = node.data.code;
					this.getStreet(areaCode).then(response => {
						// 将获取到的镇/街道数据转换成级联选择器的节点数据格式
						const data = response.map(street => {
							return {
								name: street.name,
								code: street.code,
								parentName: node.data.parentName + "/" + street.name,
								isLeaf: false // 镇/街道节点设置为非叶子节点
							};
						});
						resolve(data);
					}).catch(error => {
						console.error('Failed to load street data:', error);
						resolve([]); // 加载失败时返回空数组
					});
				} else {
					// 其他层级的节点直接返回空数组
					resolve([]);
				}
			},

			/** 查询国家机构列表 */
			getProvince() {
				return new Promise((resolve, reject) => {
					// 调用 API 获取省份数据
					listProvince1().then(response => {
						resolve(response);
					}).catch(error => {
						reject(error);
					});
				});
			},

			/** 查询市级列表 */
			getCity(provinceCode) {
				return new Promise((resolve, reject) => {
					// 调用 API 根据省份 code 获取对应的市数据
					listCity1({
						provinceCode: provinceCode
					}).then(response => {
						resolve(response);
					}).catch(error => {
						reject(error);
					});
				});
			},

			/** 查询县/区级列表 */
			getArea(cityCode) {
				return new Promise((resolve, reject) => {
					// 调用 API 根据市 code 获取对应的县/区数据
					listArea1({
						cityCode: cityCode
					}).then(response => {
						resolve(response);
					}).catch(error => {
						reject(error);
					});
				});
			},

			/** 查询镇/街道级列表 */
			getStreet(areaCode) {
				return new Promise((resolve, reject) => {
					// 调用 API 根据县/区 code 获取对应的镇/街道数据
					listStreet1({
						areaCode: areaCode
					}).then(response => {
						resolve(response);
					}).catch(error => {
						reject(error);
					});
				});
			},
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			getCode() {
				getCodeImg().then(res => {
					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
					if (this.captchaOnOff) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.loginForm.uuid = res.uuid;
					}
				});
			},
			handleLogin() {
				this.$refs["loginForm"].validate(valid => {
					if (valid) {
						this.loading = true;
          if(this.loginForm.streetCode !== null && this.loginForm.streetCode !== ''){
						if(this.shotName!=="" && this.loginForm.name === ""){
							this.loginForm.name = this.shotName
						}
						console.log(JSON.stringify(this.loginForm))
						// 调用注册方法
						registerNurse(this.loginForm)
							.then(response => {
								// 注册成功后的处理逻辑
								this.$modal.msgSuccess("注册成功");
								// 在这里可以进行其他操作，例如跳转页面等
                this.reLoginForm();
							})
							.catch(error => {
								// 注册失败的处理逻辑
								this.$modal.msgError("注册失败，请重试");
							})
							.finally(() => {
								this.loading = false;
							});
              }else{
                alert("辖区请选择到街道或者镇！")
              }
					}
				});
			},
      reLoginForm(){
        this.shotName= null;
        this.loginForm = {
        	regionName: '', //选中的区域名称
        	username: '', //用户名
        	password: '', //密码
        	institutionName: '', //医院名称
        	name: '', //医生姓名
        	sex: '', //医生性别
        	birthday: '', //生日
        	idCard: '', //身份证号
        	phone: '', //手机号
        	antecedent: '', //学历
        	specialty: '', //所学专业
        	nurseSeniority: '', //执业证书编码
        	nurselicence: '', //资格证编号
        	hospitalId: '' //医院ID

        }
      }
		}
	}
</script>




<style rel="stylesheet/scss" lang="scss" scoped>
	.tree-container {
		height: 100px;
		/* 设置容器的高度 */
		overflow-y: auto;
		/* 添加垂直滚动条 */
	}

	.login-form {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.flex-1 {
		flex: 1;
	}

	.login {
		width: 100%;
		min-width: 1200px;
		height: 100%;
		background-image: url("~@/assets/images/login/login-background.png");
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.login-container {
			position: relative;
			width: 1189px;
			height: 639px;
			background-color: #fff;

			.login-title__pic {
				position: absolute;
				top: 0;
				left: 0;
				width: 494px;
				height: 64px;
				background-image: url("~@/assets/images/login/login-title.png");
        background-repeat: no-repeat;
        color: #FCFDFF;
        font-weight: bold;
        font-size: 25px;
        line-height: 60px;
        padding-left: 22px;

			}

			.login-content {
				display: flex;
				margin-top: 24px;
				padding: 57px 92px 116px 72px;
				width: 100%;
				height: calc(100% - 24px);
				background-image: url("~@/assets/images/login/login-content-bg.png");
				background-position: left bottom;
				background-repeat: no-repeat;

				&__left {
					// background-color: pink;
					width: 551+474px;
					height: 391px;
					flex: 1;
					// background-image: url("~@/assets/images/login/login-left.png");
				}

				&__right {
					width: 1025px;
					height: 391px;
					padding-left: 49px;
					display: flex;
					flex-direction: column;

					.welcome-text {
						color: #3B3B3B;
						font-weight: bold;
						font-size: 26px;
						line-height: 48px;
						user-select: none;
						margin-top: -10px;
						margin-bottom: 10px;
					}

					.login-account {
						margin-top: 20px;

						&__icon {
							background-image: url("~@/assets/images/login/account.png");
						}
					}

					.login-password {
						margin-top: 20px;

						&__icon {
							background-image: url("~@/assets/images/login/lock.png");
							background-repeat: no-repeat;
						}
					}

					.login-account,
					.login-password {
						::v-deep .el-input__inner {
							display: block;
							height: 45px;
							font-size: 14px;
							padding-left: 51px;
						}

						::v-deep .el-input__prefix {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							width: 51px;
							height: 100%;
							padding-left: 16px;

							.login-account__icon1 {
								width: 80%;
							}

							.login-account__icon2 {
								width: 65%;
							}

							.login-account__icon,
							.login-password__icon {
								width: 24px;
								height: 22px;
							}

						}
					}

					.login-submit {
						margin-top: 15px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 45px;
						background-color: #4373F1;
						color: #fff;
						line-height: 45px;
						border-radius: 5px;
						padding-left: 27px;
						padding-right: 21px;
						font-size: 16px;
						font-weight: bold;
						cursor: pointer;
						user-select: none;

						.el-icon-right {
							font-size: 22px;
						}
					}
				}
			}

			.archival-information {
				position: absolute;
				bottom: -53px;
				left: 50%;
				transform: translateX(-50%);
				color: #6B6B6B;
				margin: 0;
				font-size: 14px;
				font-weight: 500;
			}
		}
	}

	.flex-1 {
		flex: 1;
	}

	.el-form-item {
		margin-bottom: 0px;
	}
</style>
